Source: ui/blogpostComponents/PlayButtonGroup.jsx

import React, { Component } from 'react';
import { IconButton, Fab } from "@material-ui/core";
import "../ParamView.css";
import { objectiveTypes, loadStates } from '../../LucidJS/src/optvis/renderer.js';

import PlayIcon from '@material-ui/icons/PlayArrow';
import PauseIcon from '@material-ui/icons/Pause';
import ResetIcon from '@material-ui/icons/Replay';
import SkipIcon from '@material-ui/icons/SkipNext';

/**
 * Component that contains play/stop-, reset- and single step buttons
 */
class PlayButtonGroup extends Component {

    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div className="timeline-controls">
                <IconButton className="ui-resetButton" id="reset-button"
                    title="Reset the network"
                    onClick={this.props.onReset}>
                    <ResetIcon />
                </IconButton>
                <Fab color="primary" className="ui-playButton"
                    id="play-pause-button" title="Run/Pause"
                    disabled={this.props.canOptimize || this.props.isOptimizing ? false : true}
                    onClick={() => {
                      if (this.props.isOptimizing) {
                        this.props.stopOptimization();
                      } else {
                        this.props.onOptimize();
                      }
                    }}
                    >
                    {this.props.isOptimizing ? <PauseIcon /> : <PlayIcon />}
                </Fab>
                <IconButton className="ui-stepButton" id="next-step-button"
                    title="Step"
                    disabled={this.props.isOptimizing}
                    onClick={this.props.onStep}
                    >
                    <SkipIcon />
                </IconButton>
            </div>
        );
    }
}

export default PlayButtonGroup;